<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">确认收货</block>
		</cu-custom>
		<view class="container">
			<view class="row" ref="orderInfo">
				<view class="top" @click="orderDetailGo(row.order_id)">
					<view class="order-num">订单编号:{{row.order_id}}</view>
					<view class="type">{{row.type_status}}</view>
				</view>
				<uni-row v-for="(item,j) in row.goods_list" :key="j">
					<uni-col :xs="12">
						<view>{{item.name}}</view>
					</uni-col>
					<uni-col :xs="4">
						<view class="price">￥{{item.price}}</view>
					</uni-col>
					<uni-col :xs="4">
						<view style="text-align: center;">{{item.number}}</view>
					</uni-col>
					<uni-col :xs="4">
						<view class="price" style="text-align: center;">￥{{item.price * item.number}}</view>
					</uni-col>
				</uni-row>
				<view class="btns">
					<view class="bill">合计：￥{{row.total_amount}}</view>
				</view>
			</view>
			<view>
				<sign-canvas class="sign-canvas" ref="SignCanvas" :options="options" v-model="value" />
			</view>
			<view class="btns">
				<button type="warn" @click="resign()">重新签名</button>
				<button type="default" @click="save()">确认保存</button>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		uniRow,
		uniCol
	} from '@dcloudio/uni-ui'

	import SignCanvas from 'sign-canvas';

	export default {
		components: {
			uniRow,
			uniCol,
			SignCanvas
		},
		onLoad(options) {
			this.options.canvasWidth = document.body.clientWidth - (uni.upx2px(30) * 2);
		},
		methods: {
			resign() {
				this.$refs.SignCanvas.canvasClear();
			},
			save() {

				console.log('save')

				uni.showToast({
					title: '保存成功',
					duration: 2000,

				});

				setTimeout(function() {
					uni.switchTab({
						url: "/pages/my/main"
					});
				}, 2000)


			}
		},
		data() {
			return {
				value: '',
				row: {
					"order_id": "2021013056473",
					"type_status": "已发货，待收货",
					total_amount: '70.00',
					goods_list: [{
							"name": "白菜鲜肉水饺",
							"price": 12.00,
							"number": 2
						},
						{
							"name": "营养小馄饨",
							"price": 8.00,
							"number": 2
						},
					]
				},
				options: {
					lastWriteSpeed: 1, //书写速度 [Number] 可选
					lastWriteWidth: 2, //下笔的宽度 [Number] 可选
					lineCap: "round", //线条的边缘类型 [butt]平直的边缘 [round]圆形线帽 [square]    正方形线帽
					lineJoin: "round", //线条交汇时边角的类型  [bevel]创建斜角 [round]创建圆角 [miter]创建尖角。
					canvasWidth: 320,
					canvasHeight: 200, //高度  [Number] 可选
					isShowBorder: false, //是否显示边框 [可选]
					bgColor: "#fff", //背景色 [String] 可选
					borderWidth: 1, // 网格线宽度  [Number] 可选
					borderColor: "#ff787f", //网格颜色  [String] 可选
					writeWidth: 5, //基础轨迹宽度  [Number] 可选
					maxWriteWidth: 30, // 写字模式最大线宽  [Number] 可选
					minWriteWidth: 5, // 写字模式最小线宽  [Number] 可选
					writeColor: "#101010", // 轨迹颜色  [String] 可选
					isSign: true, //签名模式 [Boolean] 默认为非签名模式,有线框, 当设置为true的时候没有任何线框
					imgType: "png" //下载的图片格式  [String] 可选为 jpeg  canvas本是透明背景的
				}
			}
		}
	}
</script>

<style lang="scss">
	@import "./style.scss";
</style>
